<template>
  <div class="photoinfo-container">
        <!-- 顶部内容 -->
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间: {{photoinfo.add_time}}</span>
            <span>点击: {{photoinfo.click}}次</span>
        </p>
        <!-- 图片缩略图 -->
        <div class="thumbs">
            <!-- 使用vue-preview组件来展示图片缩略图 -->
            <!-- 通过slides属性 绑定vue-preview组件需要展示的图片列表 -->
            <!-- close是在关闭时重新获取list列表 -->
            <vue-preview :slides="list" @close="getPhotoList"></vue-preview>
        </div>
        <!-- 图片详情  -->
        <div class="content" v-html="photoinfo.content"></div>
    </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      photoinfo: {},
      list: []
    }
  },
  created() {
    this.getPhotoInfo()
    this.getPhotoList()
  },
  methods: {
    // 根据图片资讯id查询图片资讯详情
    getPhotoInfo() {
      this.$http.get('photo/getimageInfo', {params: {id: this.id}}).then(res => {
        if (res.data.status === 0) {
          this.photoinfo = res.data.message[0];
        } else {
          this.$toast('查询失败');
        }
      });
    },
    // 根据图片资讯id查询图片资讯中的图片列表
    getPhotoList() {
      this.$http.get('photo/getthumimages', {params: {id: this.id}}).then(res => {
        if (res.data.status === 0) {
            // 需要开启图片懒加载，需要设置图片的宽高等数据(懒加载是为了能用vue-preview组件)
            res.data.message.forEach(item => {
                item.w = 600; //设置以大图浏览时的宽度
                item.h = 600; //设置以大图浏览时的高度
                item.msrc = item.src; // item.msrc:小图，item.src:大图
            })
            this.list = res.data.message;
        } else {
            this.$toast('查询失败');
        }
      });
    }
  }
}
</script>

<style lang="scss">
.photoinfo-container {
  padding: 3px;
  h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content {
    text-align: left;
    font-size: 13px;
    line-height: 30px;
  }
  .thumbs {
    .my-gallery {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
    }
    figure {
      margin: 0.2em;
    }
    img {
      width: 5.6em;
      box-shadow: 0 0 8px #999;
    }
  }
}
</style>